<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/list.css"/>

		<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.17.1/dist/bootstrap-table.min.css">
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<!-- Latest compiled and minified JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<!-- Latest compiled and minified JavaScript -->
		<script src="https://unpkg.com/bootstrap-table@1.17.1/dist/bootstrap-table.min.js"></script>
		<!-- Latest compiled and minified Locales -->
		<script src="https://unpkg.com/bootstrap-table@1.17.1/dist/locale/bootstrap-table-zh-CN.min.js"></script>

	</head>
	<body>

		<table id="courier_list"></table>
		<script>
			// 这个方法主要就是进行向服务器传递参数
			$(function () {
				$("#courier_list").bootstrapTable({
					// 本来是前端程序员的工作，进行相应的配置
					// 例如怎么分页，有哪些行哪些页显示
					url:"/courier/list.do", //数据地址
					striped:true, //是否显示行的间隔
					pageNumber:1, //初始化加载第几页
					pagination:true,//是否分页
					sidePagination:'server',//服务器分页还是客户端分页
					pageSize:5,//每一页展示的数量
					pageList:[5,10,20],//可选的单页记录数
					showRefresh:true,//可以刷新，以防卡住
					queryParams:function (params) {// 向服务器发送的数据
						var temp = {
							offset:params.offset,
							pageNumber:params.limit
						};
						return temp;
					},
					columns:[//服务器返回的数据，是一个个的对象，每一个对象对应一个列
						{
							title:"编号",
							field:"id",//把id的数据取出来，以编号进行显示
							sortable:false
						},{
							title:"姓名",
							field:"name",//把id的数据取出来，以编号进行显示
							sortable:false
						},{
							title:"电话号码",
							field:"phone",//把id的数据取出来，以编号进行显示
							sortable:false
						},{
							title:"身份证号码",
							field:"idCard",//把id的数据取出来，以编号进行显示
							sortable:false
						},{
							title:"密码",
							field:"password",//把id的数据取出来，以编号进行显示
							sortable:false
						},{
							title:"派件数",
							field:"deliveries",//把id的数据取出来，以编号进行显示
							sortable:false
						},{
							title:"注册时间",
							field:"regTime",//把id的数据取出来，以编号进行显示
							sortable:false
						},{
							title:"上次登录时间",
							field:"loginTime",//把id的数据取出来，以编号进行显示
							sortable:false
						},{
							title:"简介",
							field:"info",//把id的数据取出来，以编号进行显示
							sortable:false
						},
					],

				});
			});

		</script>


		<!--<table class="tab tab-hover">
			<tr class="active">
				<th>编号</th><th>姓名</th><th>手机号码</th><th>身份证</th><th>密码</th><th>派件数</th><th>注册时间</th><th>上次登陆时间</th><th>操作</th>
			</tr>
			<tr>
				<td>1001</td>
				<td>帅哥一枚</td>
				<td>13843838438</td>
				<td>******</td>
				<td>wsygdsb</td>
				<td>10w+</td>
				<td>无</td>
				<td>无</td>
				<td><span class="btn-danger">删除</span></td>
			</tr>
			<tr>
				<td>1001</td>
				<td>帅哥一枚</td>
				<td>13843838438</td>
				<td>******</td>
				<td>wsygdsb</td>
				<td>10w+</td>
				<td>无</td>
				<td>无</td>
				<td><span class="btn-danger">删除</span></td>
			</tr>
			<tr>
				<td>1001</td>
				<td>帅哥一枚</td>
				<td>13843838438</td>
				<td>******</td>
				<td>wsygdsb</td>
				<td>10w+</td>
				<td>无</td>
				<td>无</td>
				<td><span class="btn-danger">删除</span></td>
			</tr>
			<tr>
				<td>1001</td>
				<td>帅哥一枚</td>
				<td>13843838438</td>
				<td>******</td>
				<td>wsygdsb</td>
				<td>10w+</td>
				<td>无</td>
				<td>无</td>
				<td><span class="btn-danger">删除</span></td>
			</tr>
		</table>-->
	</body>
</html>
